<template>
  <div class="label">
    <div class="labels">
      <div class="avatar"><el-avatar :size="30" :src="userinfo.url" /></div>
      <div class="name">
        {{ data[0].essay.name }}
      </div>
      <span>|</span>
      <el-button
        class="userinfolabel"
        v-for="(item, index) in userinfo.label"
        :key="index"
        round
      >
        {{ item }}
      </el-button>
    </div>

    <div class="title">{{ data[0].essay.title }}</div>
    <span class="content"> {{ data[0].essay.content }}</span>
    <div class="operate">
      <el-button class="issue">关注问题</el-button
      ><el-button class="answer" :icon="Edit" @click="commentclick"
        >写回答</el-button
      >
      <div class="Select">
        <el-icon><Select /></el-icon>好问题
      </div>
      <div class="ChatRound" @click="ChatRoundclick(data[0].essay.uid)">
        <el-icon><ChatRound /></el-icon>添加评论
        <el-dialog v-model="dialogTableVisible">
          <template #header="{}">
            <div class="my-header">
              <div
                class="comment"
                style="
                  color: black;
                  border-bottom: 1px solid #f8f8f8;
                  padding-bottom: 10px;
                "
              >
                {{ is }} 条评论
              </div>
            </div>
          </template>
          <Dialog />
        </el-dialog>
      </div>
      <div class="reward" v-if="data[0].essay.type">
        文章赏金{{ data[0].essay.reward }}元💰
      </div>
    </div>
  </div>
  <div class="accept" v-if="data[0].essay.accept">已采纳</div>
</template>

<script >
import { defineComponent, ref, computed } from "vue";
import { useStore } from "vuex";

import { Edit } from "@element-plus/icons-vue";

import Dialog from "./dialog.vue";

export default defineComponent({
  components: { Dialog },
  props: {
    istrue: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const store = useStore();
    console.log(props.data, "propsdata");
    const userinfo = {
      url: require("@/assets/images/log.png"),
      name: "小张",
      label: ["前端开发", "javascript", "前端工程师", "react", "vue.js"],
      title:
        "标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题",
      content:
        "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
    };

    const commentclick = () => {
      emit("upistrue", !props.istrue);
    };
    const dialogTableVisible = ref(false);
    //评论数量
    const is = computed(() => store.state.comment.commentdata.length);
    const ChatRoundclick = (id) => {
      dialogTableVisible.value = !dialogTableVisible.value;
      //发送网络请求
      store.dispatch("comment/getcomment", { articleid: id });
    };

    return {
      userinfo,
      Edit,
      commentclick,
      dialogTableVisible,
      is,
      ChatRoundclick,
    };
  },
});
</script>

<style scoped lang="less">
.label {
  .labels {
    display: flex;
    align-items: center;
    .name {
      margin: 0px 10px 0px 10px;
    }
    > span {
      color: #ebebeb;
    }
  }
  .title {
    width: 700px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
  }
  .content {
    color: #7e7e7e;
    cursor: pointer;
  }
  .operate {
    margin-top: 10px;
    display: flex;
    .issue {
      background-color: #005ce6;
      color: #ffffff;
    }
    .answer {
      color: #005ce6;
      margin-right: 15px;
    }

    .Select {
      line-height: 32px;
      margin-right: 10px;
      color: #8590a6;
      //鼠标小手
      cursor: pointer;
      > i {
        //解决 icon对齐方式
        vertical-align: middle;
      }
    }
    .ChatRound {
      line-height: 32px;
      color: #8590a6;
      cursor: pointer;
      > i {
        vertical-align: middle;
      }
      /deep/.el-overlay {
        .el-overlay-dialog {
          .el-dialog {
            margin-top: 200px;
          }
          .el-dialog__body {
            height: 400px;
            overflow: auto;
            padding: 10px 20px 0 20px;
          }
        }
      }
    }
    .reward {
      line-height: 32px;
      margin-left: 10px;
      color: #e8c95f;
    }
  }

  .userinfolabel {
    background-color: #d9e8ff;
    color: #0066ff;
    margin-left: 10px;
  }
}
.accept {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  // background-color: #fa5f57;
  color: #fa5f57;
  right: 40%;
  top: 110px;
  border: 2px solid #fa5f57;
  transform: rotate(-45deg);
  font-size: 20px;
}
</style>
